<template>
     <el-table :data="article">
        <el-table-column prop="title" label="标题" width="140">
        </el-table-column>
        <el-table-column prop="body" label="内容" width="220">
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
         width="100">
            <template slot-scope="scope">
                <el-button @click="edit(scope.row._id)" type="text" size="small">编辑</el-button>
                <el-button @click="remove(scope.row._id)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
</template>
<script>
  export default {
    data() {
        return {
            article: []
        }
    },
    methods: {
        fetch() {
            this.$http.get('articles').then(res => {
                this.article = res.data;
            })
        },
        remove(id) {
            this.$http.delete(`articles/${id}`).then(res => {
                console.log(res);
               this.$message({
                    message: '删除文章成功',
                    type: 'success'
                });
                this.fetch();
            });
        },
        edit(id) {
            this.$router.push(`/articles/edit/${id}`);
        }
    },
    created() {
        this.fetch();
    }
      
  };
</script>